<template>
  <div class='navbar'>
    <div class='navbar-inner'>
      <div class='container-fluid'>
        <router-link class='brand' to='/'>
          <span class='hidden-phone'>自动文档</span>
        </router-link>
        <a class='toggle-nav btn pull-left' v-on:click="change_collapse()">
          <span v-if="collapse">API</span><span v-else>数据库</span>
        </a>

        <ul class='nav pull-right'>
          <li class='dropdown dark user-menu'>
            <a href='/logout'>
              Sign out
            </a>
          </li>
        </ul>
        <div class="navbar-search pull-right hidden-phone">
          <div style="margin-left: 20px">
            <el-input placeholder="search ..." v-model="searchContent" size="mini"  @keyup.enter.native="take_search()">
              <el-button slot="append" icon="el-icon-search" @click="take_search()"></el-button>
            </el-input>
          </div>
        </div>
        <el-badge :value="progress_count" class="item  pull-right" style="margin-top: 10px">
          <el-popover
            placement="bottom"
            width="400"
            trigger="click">
            <label v-if="progress_count===0">
              当前没有正在进行的任务
            </label>
            <div v-for="(p,k) in progress_value" :key="k.key">
              <label>{{k}}</label>
              <el-progress :percentage="p[0]">
              </el-progress>
            </div>
            <a slot="reference">
              <i class="el-icon-loading" v-if="progress_count>0"></i>
              <i class="el-icon-success" v-else></i>
            </a>
          </el-popover>
        </el-badge>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Header',
  props: {
    collapse: Boolean,
  },
  data() {
    return {
      searchContent: '',
      progress_value: {},
    };
  },
  components: {},
  methods: {
    change_collapse() {
      this.$emit('update:collapse', !this.collapse);
    },
    take_search() {
      this.$router.push({ name: 'search', params: { queryContent: this.searchContent } });
    },
  },
  created() {
    const self = this;
    setInterval(
      () => {
        axios.get('/api/common/progress/all').then((res) => {
          self.progress_value = res.data;
          for (const k in self.progress_value) {
            if (self.progress_value[k][0] >= 100) {
              this.$store.state.data_iterable += 1;
              this.$notify({
                title: '完成',
                message: `${k} 已完成`,
                type: 'success',
              });
            }
          }
        });
      }, 3000,
    );
  },
  computed: {
    progress_count() {
      return Object.keys(this.progress_value).length;
    },
  },
};
</script>

<style scoped lang="scss">
  @import "../assets/css/bootstrap.css";
  /*@import "../assets/css/light-theme.css";*/
  /*@import "../assets/css/bootstrap-responsive.css";*/

  .navbar {
    margin: 0;
  }
</style>
